:root {
    --dark: #000;
    --medium: #1b1b1b;
    --light: #2e2e2e
}

.top-dark-mode-button {
    position: absolute;
    top: 60px;
    right: 15px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 1000;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in
}

.top-dark-mode-button:after {
    content: 'DARK';
    position: absolute;
    color: #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 22px;
    top: 10px;
    -webkit-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    transition: .1s ease-in
}

.dark-mode-group {
    position: absolute;
    top: -340px;
    right: 15px;
    width: 80px;
    height: 470px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.dark-mode-group p {
    font-size: .7em !important;
    text-align: center;
    color: #fff;
    opacity: .8
}

.dark-toggle {
    margin: 0;
    width: 30px;
    height: 16px;
    z-index: 20;
    border-radius: 10px;
    background: 0 0;
    border: 3px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1000;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.dark-toggle span {
    height: 20px;
    width: 20px;
    left: -8px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75)
}

body.dark-mode .top-dark-mode-button:after {
    content: 'LIGHT';
    color: var(--primary);
    top: 12px
}

body.dark-mode .button-solid {
    background: 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 0 #000;
    box-shadow: 0 2px 0 #000;
    color: #ff7700;
    display: block;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: auto;
    height: 46px;
    padding: 15px 30px;
    -webkit-animation: glow .8s ease-out infinite alternate;
    animation: glow .8s ease-out infinite alternate
}

body.dark-mode #contact button {
    background: 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 0 #000;
    box-shadow: 0 2px 0 #000;
    color: #43b7ff;
    display: block;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: auto;
    height: 46px;
    padding: 15px 30px;
    -webkit-animation: glow 8s steps() infinite forwards;
    animation: glow 8s steps() infinite forwards
}

@-webkit-keyframes glow {
    0% {
        border-color: #ff7700;
        -webkit-box-shadow: 0 0 5px rgba(67, 183, 255, .2), inset 0 0 5px rgba(67, 183, 255, .1), 0 2px 0 #000;
        box-shadow: 0 0 5px #ff7700, inset 0 0 5px #ff7700, 0 2px 0 #000;
    }

    15% {
        border-color: #ee760c;
        -webkit-box-shadow: 0 0 10px #ff7700, inset 0 0 10px #ff7700, 0 2px 0 #000;
        box-shadow: 0 0 10px #ff7700, inset 0 0 10px #ff7700, 0 2px 0 #000;
    }

    16% {
        border-color: transparent;
        -webkit-box-shadow: 0 0 20px transparent, inset 0 0 10px transparent, 0 2px 0 transparent;
        box-shadow: 0 0 20px transparent, inset 0 0 10px transparent, 0 2px 0 transparent;
    }

    17% {
        border-color: #e08230;
        -webkit-box-shadow: 0 0 5px #8f5d31, inset 0 0 5px #8f5d31, 0 2px 0 #000;
        box-shadow: 0 0 5px #8f5d31, inset 0 0 5px #8f5d31, 0 2px 0 #000;
    }

    20% {
        border-color: #ff7700;
        -webkit-box-shadow: 0 0 10px #ff8011, inset 0 0 10px #ff8011, 0 2px 0 #000;
        box-shadow: 0 0 10px #ff8011, inset 0 0 10px #ff8011, 0 2px 0 #000;
    }

    30% {
        border-color: #ff7700;
        -webkit-box-shadow: 0 0 5px #d3833d, inset 0 0 5px #d3833d, 0 2px 0 #000;
        box-shadow: 0 0 5px #d3833d, inset 0 0 5px #d3833d, 0 2px 0 #000;
    }

    100% {
        border-color: #ff7700;
        -webkit-box-shadow: 0 0 10px #ff7700, inset 0 0 10px #ff7700, 0 2px 0 #000;
        box-shadow: 0 0 10px #ff7700, inset 0 0 10px #ff7700, 0 2px 0 #000;
    }
}

.top-dark-mode-button .dark-toggle {
    background: #e6e6e6;
    border-color: #e6e6e6;
    -webkit-box-shadow: 0 15px 5px -8px rgba(67, 183, 255, .5);
    box-shadow: 0 15px 5px -8px rgba(67, 183, 255, .5);
    width: 35px
}

.dark-mode-button {
    background: 0 0;
    border: none;
    height: 40px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

body.dark-mode .triangle {
    border-bottom: 26px solid var(--dark);
    -webkit-box-shadow: 0 15px 5px -8px rgba(67, 183, 255, .5);
    box-shadow: 0 15px 5px -8px rgba(67, 183, 255, .5);
    -webkit-animation-name: flicker;
    animation-name: flicker;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s
}

@-webkit-keyframes flicker {
    0% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    1% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    2% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    8% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    9% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    25% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    26% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    47% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    48% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    100% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }
}

@keyframes flicker {
    0% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    1% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    2% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    8% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    9% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    25% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    26% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    47% {
        -webkit-box-shadow: 0 15px 5px -8px transparent;
        box-shadow: 0 15px 5px -8px transparent
    }

    48% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }

    100% {
        -webkit-box-shadow: 0 15px 5px -8px #dd89408e;
        box-shadow: 0 15px 5px -8px #dd89408e;
    }
}

body.dark-mode .wire {
    background: var(--dark)
}

body.dark-mode .dark-toggle {
    background: #ff7700;
    background: -o-linear-gradient(left, #ff7700 0, #a30000 100%);
    background: -webkit-gradient(linear, left top, right top, from(#ff7700), to(#a30000));
    background: linear-gradient(90deg, #ff7700 0, #a30000 100%);
    border: none;
}

body.dark-mode .dark-toggle span {
    left: 15px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease
}

body.dark-mode .navbar-menu {
    background: #222;
    background: -o-linear-gradient(#222, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
    background: linear-gradient(#222, #000);
    height: 120%
}

body.dark-mode .neon {
    visibility: visible;
    opacity: 1
}

body.dark-mode .side-nav a {
    color: #fff
}

body.dark-mode .hamburger-inner,
body.dark-mode .hamburger-inner::after,
body.dark-mode .hamburger-inner::before {
    background: #fff;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease
}

body.dark-mode .hamburger.is-active .hamburger-inner::after,
body.dark-mode .hamburger.is-active .hamburger-inner::before {
    background: #fff
}

body.dark-mode {
    background: var(--dark)
}

body.dark-mode h2,
body.dark-mode li,
body.dark-mode p {
    color: #fff !important
}

body.dark-mode li,
body.dark-mode p {
    opacity: .9
}

body.dark-mode h3 {
    color: var(--primary)
}

.blue {
    display: block
}

body.dark-mode .blue {
    display: none
}

body.dark-mode .white {
    display: block !important
}

body.dark-mode .universe {
    display: block
}

body.dark-mode #landing {
    background: rgba(0, 16, 153, .3);
    background: -o-linear-gradient(305deg, rgba(0, 16, 153, .2) 0, rgba(58, 217, 255, .2) 96%);
    background: linear-gradient(145deg, rgba(0, 16, 153, .2) 0, rgba(58, 217, 255, .2) 96%)
}

.dark-swoop {
    display: none
}

body.dark-mode .dark-swoop {
    display: block
}

body.dark-mode .light-swoop {
    display: none
}

body.dark-mode #page-header {
    background: url(../../../images/5728f1d0fbcb3d15a4cf71013800d9be6ec55a36/night.jpg);
    background-size: auto;
    background-position: 10% 62%;
    background-repeat: no-repeat
}

body.dark-mode #page-header:before {
    display: none
}

body.dark-mode #portfolio {
    height: 2039px !important
}

body.dark-mode .example {
    background: var(--medium);
    -webkit-box-shadow: 0 0 25px -5px #43b7ff;
    box-shadow: 0 0 25px -5px #43b7ff;
    border-right: 1px solid var(--primary);
    border-top: 1px solid var(--primary);
    border-left: 1px solid var(--primary)
}

body.dark-mode #prices {
    height: 1666px !important
}

body.dark-mode .price-box {
    background: var(--medium);
    -webkit-box-shadow: 0 0 25px -5px #43b7ff;
    box-shadow: 0 0 25px -5px #43b7ff;
    border: transparent;
    border: 1px solid var(--primary)
}

body.dark-mode .price-box h2 {
    background: var(--dark);
    color: #fff;
    border-radius: 5px 5px 0 0
}

body.dark-mode .price-box li {
    color: #fff
}

body.dark-mode .price-box span {
    color: #fff
}

body.dark-mode footer {
    background: #000;
    background: -o-linear-gradient(#222, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
    background: linear-gradient(#222, #000)
}

body.dark-mode .light-source {
    position: absolute;
    height: 200px;
    width: 200px;
    background: rgba(67, 183, 255, .66);
    opacity: .4;
    z-index: 100
}

body.dark-mode .bulb:before {
    display: block
}

.dark-mode-svg {
    display: none
}

body.dark-mode .dark-mode-svg {
    display: block
}

body.dark-mode .light-mode-svg {
    display: none
}

body.dark-mode #about-contact:before {
    background: #000
}

body.dark-mode #page-header:before {
    background: rgba(0, 7, 66, .9) !important;
    background: -o-linear-gradient(305deg, rgba(0, 16, 153, .5) 0, #3ad9ff 96%);
    background: -o-linear-gradient(305deg, rgba(0, 16, 153, .5) 0, rgba(58, 217, 255, .5) 96%);
    background: linear-gradient(145deg, rgba(0, 16, 153, .5) 0, rgba(58, 217, 255, .5) 96%)
}

body.dark-mode #contact {
    background: #222;
    background: -o-linear-gradient(#333, #111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
    background: linear-gradient(#333, #111);
    -webkit-box-shadow: 0 0 25px -5px #43b7ff;
    box-shadow: 0 0 25px -5px #43b7ff;
    border: 1px solid var(--primary)
}

body.dark-mode #contact h3 {
    color: #fff
}

body.dark-mode #contact input {
    background: #222;
    background: -o-linear-gradient(#222, #333);
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
    background: linear-gradient(#222, #000);
    color: #fff
}

body.dark-mode #contact input:focus {
    border: 1px solid var(--primary);
    -webkit-box-shadow: 0 0 10px -5px #43b7ff;
    box-shadow: 0 0 10px -5px #43b7ff;
    animation: glow;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite
}

body.dark-mode #contact textarea {
    background: #000;
    background: -o-linear-gradient(#222, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
    background: linear-gradient(#222, #000);
    color: #fff
}

body.dark-mode #contact textarea:focus {
    border: 1px solid var(--primary);
    -webkit-box-shadow: 0 0 10px -5px #43b7ff;
    box-shadow: 0 0 10px -5px #43b7ff;
    animation: glow;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite
}

body.dark-mode .line-box {
    border-left: 2px dashed rgba(67, 183, 255, .6);
    border-bottom: 2px dashed rgba(67, 183, 255, .6)
}

body.dark-mode .line-box:after {
    border-right: 2px dashed rgba(67, 183, 255, .6)
}

body.dark-mode .checkmark li {
    color: #fff
}

body.dark-mode #updates {
    background: var(--dark)
}

body.dark-mode .box {
    background: var(--medium);
    -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
    box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
    border-left: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary)
}

@-webkit-keyframes neon {
    0% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66)
    }

    50% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .4);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .4)
    }

    100% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66)
    }
}

@keyframes neon {
    0% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66)
    }

    50% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .4);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .4)
    }

    100% {
        -webkit-box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66);
        box-shadow: 0 -10px 25px -4px rgba(67, 183, 255, .66)
    }
}

@media screen and (min-width:500px) and (max-width:1025px) {
    body.dark-mode #portfolio {
        height: auto !important
    }

    body.dark-mode #page-header {
        background: url(../../../images/5728f1d0fbcb3d15a4cf71013800d9be6ec55a36/night.jpg);
        background-attachment: fixed;
        background-position: 46% 264%
    }

    .dark-mode-group {
        height: 430px;
        top: -310px
    }

    .top-dark-mode-button {
        right: 50px
    }
}

@media screen and (min-width:1026px) {
    header {
        max-width: 1100px;
        position: relative;
        margin: auto
    }

    body.dark-mode #page-header {
        background: url(../../../images/5728f1d0fbcb3d15a4cf71013800d9be6ec55a36/night.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 130%
    }

    .mobile-dark {
        display: none !important
    }

    .dark-mode-group {
        position: relative;
        right: -32px;
        top: -270px
    }

    body.dark-mode .navbar-menu {
        height: 124px
    }

    body.dark-mode .navbar-menu {
        overflow: visible
    }

    .top-dark-mode-button {
        position: absolute !important;
        top: 44px !important;
        right: 0 !important;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        z-index: 5000
    }

    body.dark-mode .navbar-menu {
        background: unset
    }

    body.dark-mode .navbar-menu {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    body.dark-mode .circles:before {
        border: 1px dashed rgba(67, 183, 255, .5)
    }

    body.dark-mode #portfolio {
        height: auto !important
    }

    body.dark-mode #prices {
        height: 100px !important
    }
}